<template>
  <div>
    <h1>Home</h1>
    <div class="head-img">
<!--      <img src="~assets/img/2.jpg" alt="">-->
    </div>
    <ul>
      <li>
        <nuxt-link :to="{name:'index'}">HOME</nuxt-link>
      </li>
      <li>
        <nuxt-link :to="{name:'about'}">about</nuxt-link>
      </li>
      <li>
        <nuxt-link :to="{name:'news',params:{newsId:123}}">news</nuxt-link>
      </li>
      <li>
        <nuxt-link :to="'news/123'">news-content</nuxt-link>
      </li>
      <nuxt-link :to="{name:'news-id',params:{id:123,title:'该值会替换title的内容'}}">news(动态路由的另一种方式)</nuxt-link>
      <li>
        <nuxt-link :to="'news/abc'">news-content(错误参数示范)</nuxt-link>
      </li>
      <li>
        <nuxt-link :to="{name:'asyncData'}">asyncData</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
}
</script>

<style>
.head-img {
  width: 1000px;
  height: 800px;
  background-image: url("~assets/img/2.jpg");
}
</style>

